<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列对象</title>
    <script>
        function f1(){
            // Select对象
            let s1 = document.getElementById("s1");
            let ops = s1.options;
            console.log(ops);
            for(let i = 0; i < ops.length; i++){
                // console.log(ops[i].value)
                console.log(ops[i].text+"---"+ops[i].value)
            }

            // 获取当前下拉列所选中的对象
            // 获取下拉列所选选项的索引号
            let index = s1.selectedIndex;
            console.log(ops[index].text+"---"+ops[index].value)
        }

        function f2(){
            let s1 = document.getElementById("s1");
            // let op = s1.options[s1.selectedIndex]
            let op = s1[s1.selectedIndex]
            console.log("文本值:"+op.text+",服务器值:"+op.value)
        }
        function f3(){
            let s1 = document.getElementById("s1");
            let inText = document.getElementById("inText").value;
            let inValue = document.getElementById("inValue").value;

            // let op1 = document.createElement("option")
            // s1.appendChild(op);
            // let op = new Option(inText,inValue);
            s1[s1.length] = new Option(inText,inValue);
        }

        function f4(){
            let s1 = document.getElementById("s1");
            let inText = document.getElementById("inText").value;
            let inValue = document.getElementById("inValue").value;
            s1[s1.selectedIndex] = new Option(inText,inValue);
        }

        function f5(){
            let s1 = document.getElementById("s1");
            // 在下拉列数组中,如果某个元素的值为null,则表示该元素失效
            // 预支对应的HTML元素也会失效
            s1[s1.selectedIndex] = null;
        }

        function f6(){
            let s1 = document.getElementById("s1");
            s1.length = 1;
        }
    </script>
</head>
<body>
<select id="s1" onchange="f2()">
    <option value="-1">请选择</option>
    <option value="1">aaa</option>
    <option value="2">bbb</option>
    <option value="3">ccc</option>
</select>
<hr>
文本值:<input type="text" id="inText"><br>
服务器值:<input type="text" id="inValue"><br>
<button onclick="f1()">测试</button>
<button onclick="f3()">添加</button>
<button onclick="f4()">修改选中项</button>
<button onclick="f5()">删除选中项</button>
<button onclick="f6()">清空下拉列</button>
</body>
</html>